<template>
<div>
    <centerHeader :title="header"></centerHeader>
    <div class="publicsetup">
        <div class="publicsetup_item">
            <p class="publicsetup_item_left">类型</p>
            <div class="publicsetup_item_right">
                <input type="radio" value="认证服务号" checked style="width:auto;margin-right:5px">
                <label>认证服务号</label>
            </div>
        </div>
        <div class="publicsetup_item">
            <p class="publicsetup_item_left">*原始ID</p>
            <div class="publicsetup_item_right">
                <input type="text" name="" id="wx_id" :value="WxInfo.wx_id">
                <br>
                <label class="jinggao">注意: 上线后请不要更改公众号，否则会影响先前的粉丝，如需换号请申请开新号 </label>
            </div>
        </div>
        <div class="publicsetup_item">
            <p class="publicsetup_item_left">*微信号</p>
            <div  class="publicsetup_item_right">
                <input type="text" name="" id="wx_account" :value="WxInfo.wx_account">
            </div>
        </div>
        <div class="publicsetup_item">
            <p class="publicsetup_item_left">*公众号名称</p>
            <div class="publicsetup_item_right">
                <input type="text" name="" id="wx_name" :value="WxInfo.wx_name">
            </div>
        </div>
        <div class="publicsetup_item">
            <p class="publicsetup_item_left">*App &nbsp;ID</p>
            <div class="publicsetup_item_right">
                <input type="text" name="" id="app_id" :value="WxInfo.app_id">
            </div>
        </div>
        <div class="publicsetup_item">
            <p class="publicsetup_item_left">*App &nbsp;Secret</p>
            <div class="publicsetup_item_right">
                <input type="text" name="" id="app_secret" :value="WxInfo.app_secret">
            </div>
        </div>
        <div class="publicsetup_item">
            <p class="publicsetup_item_left" style="position:absolute">*IP白名单</p>
            <div  class="publicsetup_item_right" style="left:33%;position:relative">
            <!-- <p v-for="(item,index) in whileIP" :key="index">
            <span v-text="whileIP[0]">
            </span>
            <br>
            </p> -->
            <p v-html="tihuan(IpList)" v-if="IpList.length>0"></p>
            <span v-clipboard:copy=IpList v-clipboard:success="onCopy" style="cursor: pointer;"><i class="el-icon-document"></i>点击复制</span>
            </div>
        </div>
        <h1>关注设置</h1>
        <div class="publicsetup_item">
            <p class="publicsetup_item_left">关注模式</p>
            <div class="publicsetup_item_right">
                <input type="radio" name="guanzhu" id="guanzhu" style="width:auto;margin-right:5px" :checked="WxInfo.subcontrol==0"><label>主动关注</label>
                <input type="radio" name="guanzhu" id="guanzhu1" :checked="WxInfo.subcontrol==1" style="width:auto;margin-right:5px"><label>强制关注</label>
            </div>
        </div>
        <div class="publicsetup_item">
            <p class="publicsetup_item_left">引导关注链接地址</p>
            <div class="publicsetup_item_right">
                <input type="text" placeholder="可选" id="subsribe_url" :value="WxInfo.subsribe_url">
                <br>
                <span class="jinggao">如果不填，则默认使用公众号的二维码引导关注</span>
            </div>
        </div>
        <h1>客服设置</h1>
        <div class="publicsetup_item">
            <p class="publicsetup_item_left">客服微信二维码图片url</p>
            <div  class="publicsetup_item_right">
                <input type="text" placeholder="可选填，默认由平台提供客服支持" :value="WxInfo.service_img" id="service_img">
                <br>
                <span class="jinggao" >可使用微博上传图片，将上传后的图片地址填入本文本框中</span>
            </div>
        </div>
        <p class="setget">
            <span @click="save">保存</span>
            <span @click="reset">重置</span>
        </p>
 </div>       

    </div>
</template>
<script>
import centerHeader from "../../../components/center-header";
export default {
  data() {
    return {
      whileIP: ["192.168.1.1", "1.1.1.1"],
      user_id: 10001,
      WxInfo: {
        app_id: "",
        app_secret: "",
        d_id: 10001,
        encode_key: "",
        ip_white_list: "",
        service: "",
        service_img: "",
        subcontrol: 1,
        subsribe_url: "",
        token: "",
        type: 0,
        wx_account: "",
        wx_id: "",
        wx_name: ""
      },
      header: [{ title: "公众号设置", path: "/home/setup/publicsetup" }],
      wx_id: "",
      wx_name: "",
      wx_account: "",
      app_id: "",
      app_secret: "",
      subsribe_url: "",
      service_img: "",
      subcontrol: 1,
      IpList:[]
    };
  },
  components: {
    centerHeader
  },
  methods: {
    save() {
      let that = this;
      that.wx_id = document.getElementById("wx_id").value;
      that.wx_name = document.getElementById("wx_name").value;
      that.wx_account = document.getElementById("wx_account").value;
      that.app_id = document.getElementById("app_id").value;
      that.app_secret = document.getElementById("app_secret").value;
      that.subsribe_url = document.getElementById("subsribe_url").value;
      console.log(that.WxInfo.subsribe_url)
      that.service_img = document.getElementById("service_img").value;
      console.log(that.WxInfo.service_img)
      if (document.getElementById("guanzhu").ischecked) {
        that.subcontrol = 0;
      } else {
        that.subcontrol = 1;
      }
      if (that.subsribe_url == "" || that.subsribe_url == null) {
        that.subsribe_url = that.WxInfo.subsribe_url;
      }
      if (that.service_img == "" || that.service_img == null) {
        that.service_img = that.WxInfo.service_img;
      }
      console.log(that.subsribe_url, that.service_img);
      if (that.wx_id == "" || that.wx_id == null) {
        that.$message.error("原始id不能为空");
      } else if (that.wx_name == "" || that.wx_name == null) {
        that.$message.error("昵称不能为空");
      } else if (that.wx_account == "" || that.wx_account == null) {
        that.$message.error("微信号不能为空");
      } else if (that.app_id == "" || that.app_id == null) {
        that.$message.error("App_Id不能为空");
      } else if (that.app_secret == "" || that.app_secret == null) {
        that.$message.error("App_Secret不能为空");
      } else if (that.app_secret == "" || that.app_secret == null) {
        that.$message.error("App_Secret不能为空");
      } else {
        that.axios
          .post("/cp/v1/User/setWxInfo", {
            user_id: that.user_id,
            wx_id: that.wx_id,
            wx_name: that.wx_name,
            wx_account: that.wx_account,
            app_id: that.app_id,
            app_secret: that.app_secret,
            subsribe_url: that.subsribe_url,
            service_img: that.service_img,
            type: 0,
            subcontrol: that.subcontrol
          })
          .then(res => {
            console.log(res);
            if (res.data.code == 200) {
              that.$message.success(res.data.message + "，请刷新页面查看更新");
            }
          });
      }
    },
    //重置
    reset() {
      let that = this;
      document.getElementById("wx_id").value = that.WxInfo.wx_id;
      document.getElementById("wx_name").value = that.WxInfo.wx_name;
      document.getElementById("wx_account").value = that.WxInfo.wx_account;
      document.getElementById("app_id").value = that.WxInfo.app_id;
      document.getElementById("app_secret").value = that.WxInfo.app_secret;
      document.getElementById("subsribe_url").value = that.WxInfo.subsribe_url;
      document.getElementById("service_img").value = that.WxInfo.service_img;
      if (that.WxInfo.subcontrol == 0) {
        document.getElementById("guanzhu").checked = true;
      } else {
        document.getElementById("guanzhu1").checked = true;
      }
    },
    onCopy(e) {
      this.$message.success("复制成功!");
    },
    tihuan(ipwhile) {
      return ipwhile.replace(/\r|\r\n|\n/g, "<br>");
    },
    //获取公众号信息
    getWxInfo(user_id) {
      let that = this;
      that.axios
        .post("/cp/v1/User/getWxInfo", {
          user_id: user_id
        })
        .then(res => {
          if (res.data.code == 200) {
            that.WxInfo = res.data.data;
          }
        });
    },
    getIpList(){
      this.axios.post('/cp/v1/User/getIpList').then(res=>{
        this.IpList=res.data.data;
      })
    }
  },
  created() {
    let that = this;
    that.user_id = JSON.parse(localStorage.userInfo).user_id;
    that.getWxInfo(that.user_id);
    that.getIpList();
  }
};
</script>
<style scoped>
.publicsetup {
  font-size: 14px;
  height: 94%;
  position: relative;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-top: 1%;
  padding-left: 10%;
}
.publicsetup>h1{
   font-size: 18px;
}
.publicsetup_item_right > input {
  display: inline-block;
  padding: 5px 0px 5px 10px;
  width: 230px;
}
.publicsetup_item {
  position: relative;
  margin-bottom: 26px;
}
.publicsetup_item:last-child {
  margin-bottom: 60px;
}
.publicsetup_item_left {
  text-align: right;
  display: inline-block;
  width: 20%;
  padding-left: 6%;
  margin-right: 28px;
}
.publicsetup_item_right {
  display: inline-block;
  align-self: flex-start;
}
.jinggao {
  position: absolute;
  top: 40px;
  color: #cccccc;
}
.setget {
  text-align: center;
  padding: 20px;
  margin-bottom: 50px;
}
.setget > span {
  background: #36a4ff;
  color: #ffffff;
  padding: 10px 40px;
  border-radius: 10px;
  cursor: pointer;
}
.setget > span:first-child {
  margin-right: 20px;
  margin-left: -20%;
}
.setget > span > :last-child {
  margin-left: 20px;
}
input {
  color: #aaaaaa;
}
input:focus {
  color: #000000;
}
.inputerror {
  border: 1px solid red;
}
.button {
  text-align: center;
  margin: 50px 0;
  margin-left: -25%;
}
.button > span {
  width: 120px;
  height: 50px;
  padding: 15px 50px;
  background-color: #409eff;
  border-radius: 8px;
  text-align: center;
  color: #fff;
}
</style>
